<template>
	<view class="index">
		<view class="search-wrapper">
			<input confirm-type="search" @confirm="query" focus type="text" v-model="keywords" class="input"
				placeholder="输入商品名称查询" />
			<uni-icons v-if="keywords" type="clear" @tap="keywords = ''" size="18" color="#898989"
				class="close"></uni-icons>
			<image src="https://cdpresources.hobon.cc/procurement-mini-program/static/search.png" class="icon"
				mode="widthFix"></image>
			<view class="search-btn" @click="query">
				搜索
			</view>
		</view>
		<!-- 		<view class="date-wrapper">
			<uni-datetime-picker :end="Date.now()" @change="query" type="date" v-model="single">
				<text>{{ dateStr }}</text>
				<uni-icons type="bottom" size="14" class="icon" color="#666666"></uni-icons>
			</uni-datetime-picker>
		</view> -->
		<view class="page-wrapper">
			<swiper class="swiper">
				<swiper-item class="swiper-item">
					<mescroll-item :keywords="keywords" ref="mescrollItem"></mescroll-item>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import MescrollItem from "./mescroll-swiper-item.vue";

	export default {
		data() {
			return {
				tabList: ['待分货', '已分货'],
				tabNumbers: [4, 2],
				first: true,
				current: 0,
				swiperList: [],
				single: this.$helper.getDay(0, '-'),
				keywords: ''
			}
		},
		mounted() {

		},
		computed: {
			dateStr() {
				let str = '';
				if (this.single === this.$helper.getDay(0, '-')) {
					str += '今天 ';
				} else if (this.single === this.$helper.getDay(-1, '-')) {
					str += '昨天 ';
				} else if (this.single === this.$helper.getDay(-2, '-')) {
					str += '前天 ';
				}
				str += this.single.substring(5);
				return str;
			}
		},
		methods: {
			query() {
				if (!this.keywords) {
					uni.showToast({
						title: '请输入商品名称进行查询',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.$refs.mescrollItem.refresh()
			},
			scan() {
				uni.scanCode({
					scanType: ["barCode"],
					success: async (res) => {
						if (res.result.length === 19) {
							uni.navigateTo({
								url: '/subPage_distribution/detail?code=' + res.result
							})
						} else {
							uni.showToast({
								title: '无效的商品码',
								icon: 'error'
							})
						}
					}
				});
			},
		},
		components: {
			MescrollItem
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;

		.search-wrapper {
			background-color: #ffffff;
			margin: 3upx 0;
			padding: 10upx 20upx;
			position: relative;
			display: flex;
			align-items: center;

			.input {
				border-radius: 10upx;
				border: 2upx solid #acacac;
				height: 70upx;
				width: 100%;
				padding: 0 120upx 0 30upx;
				box-sizing: border-box;
				font-size: 32upx;
			}

			.icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 180upx;
				width: 26upx;
				height: 26upx;
			}

			.close {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 230upx;
			}

			.search-btn {
				width: 150upx;
				background-color: #F26022;
				color: #ffffff;
				height: 70upx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10upx;
				margin-left: 10upx;
				font-size: 28upx;

				&.scan {
					width: 250upx;
				}
			}
		}

		.date-wrapper {
			height: 80upx;
			font-size: 30upx;
			color: #434343;
			display: flex;
			align-items: center;
			padding-left: 30upx;
			min-width: 180upx;
			background-color: #ffffff;

			.icon {
				font-weight: bold;
				margin-left: 5upx;
			}
		}

		.swiper {
			height: calc(100vh - 70upx);

			.tip {
				color: #FF8D1A;
				background-color: #ffffff;
				border-radius: 20upx;
				padding: 20upx;
				font-size: 28upx;
			}

			.nodata-wrapper {
				text-align: center;
				font-size: 32upx;
				color: #666666;

				.nodata-image {
					margin-top: 300upx;
					margin-bottom: 10upx;
					width: 246upx;
				}

				.loading-image {
					margin-top: 300upx;
					margin-bottom: 10upx;
					width: 296upx;
					height: 205upx;
				}
			}
		}

	}
</style>